<template>
  <div
    class="daterang-box not-select"
    ref="dateBox"
    :style="{
      display: dateBoxStyle
    }"
  >
    <div class="d-flex">
      <div style="width:50%;padding-right:6px;">
        <!-- 值表示 -->
        <div>
          <input type="text" class="input-box" v-model="tmpValue[0]" readonly />
        </div>
        <!-- 日期操作 -->
        <div class="select-box">
          <img src="../assets/left.png" class="next-btn f-left" @click="leftClick" />
          <span>
            <select style="width: 80px; margin-right: 5px" v-model="startYearValue">
              <option v-for="item in leftYears" :key="item" :value="item">
                {{ item }}
              </option>
            </select>
          </span>
        </div>
        <!-- 日期表示 -->
        <div>
          <ul class="item-box" @click="itemLeftClick($event)">
            <li :class="calcLeftClass(1)" :data-value="1">1月</li>
            <li :class="calcLeftClass(2)" :data-value="2">2月</li>
            <li :class="calcLeftClass(3)" :data-value="3">3月</li>
            <li :class="calcLeftClass(4)" :data-value="4">4月</li>
            <li :class="calcLeftClass(5)" :data-value="5">5月</li>
            <li :class="calcLeftClass(6)" :data-value="6">6月</li>
            <li :class="calcLeftClass(7)" :data-value="7">7月</li>
            <li :class="calcLeftClass(8)" :data-value="8">8月</li>
            <li :class="calcLeftClass(9)" :data-value="9">9月</li>
            <li :class="calcLeftClass(10)" :data-value="10">10月</li>
            <li :class="calcLeftClass(11)" :data-value="11">11月</li>
            <li :class="calcLeftClass(12)" :data-value="12">12月</li>
          </ul>
        </div>
      </div>
      <div style="width:50%;padding-right:6px;">
        <!-- 值表示 -->
        <div>
          <input type="text" class="input-box" v-model="tmpValue[1]" readonly />
        </div>
        <!-- 日期操作 -->
        <div class="select-box">
          <span>
            <select style="width: 80px; margin-right: 5px" v-model="endYearValue">
              <option v-for="item in rightYears" :key="item" :value="item">
                {{ item }}
              </option>
            </select>
          </span>
          <img src="../assets/right.png" class="next-btn f-right" @click="nextClick" />
        </div>
        <!-- 日期表示 -->
        <div>
          <ul class="item-box" @click="itemRightClick($event)">
            <li :class="calcRightClass(1)" :data-value="1">1月</li>
            <li :class="calcRightClass(2)" :data-value="2">2月</li>
            <li :class="calcRightClass(3)" :data-value="3">3月</li>
            <li :class="calcRightClass(4)" :data-value="4">4月</li>
            <li :class="calcRightClass(5)" :data-value="5">5月</li>
            <li :class="calcRightClass(6)" :data-value="6">6月</li>
            <li :class="calcRightClass(7)" :data-value="7">7月</li>
            <li :class="calcRightClass(8)" :data-value="8">8月</li>
            <li :class="calcRightClass(9)" :data-value="9">9月</li>
            <li :class="calcRightClass(10)" :data-value="10">10月</li>
            <li :class="calcRightClass(11)" :data-value="11">11月</li>
            <li :class="calcRightClass(12)" :data-value="12">12月</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { computed, ref, toRefs } from '@vue/reactivity';
import { watch } from '@vue/runtime-core';
export default {
  name: 'MongthRange'
};
</script>
<script setup>
//eslint-disable-next-line
const props = defineProps({
  visible: Boolean,
  min: String,
  max: String,
  value: Array
});
//eslint-disable-next-line
const emits = defineEmits(['update:visible', 'update:value']);
const moment = window.moment;
const { visible, max, min, value } = toRefs(props);
const tmpValue = ref(value.value);
watch(value, () => {
  if (value.value.toString() !== tmpValue.value.toString()) {
    tmpValue.value = value.value;
  }
});
//计算年范围
const years = computed(() => {
  let maxYears = moment(max.value, 'YYYYMMDD').get('year');
  let minYears = moment(min.value, 'YYYYMMDD').get('year');
  let results = [];
  while (minYears <= maxYears) {
    results.push(minYears++);
  }
  return results;
});
//左侧年列表
const leftYears = computed(() => {
  let left = Object.assign([], years.value);
  if (years.value.length > 1) {
    left.pop();
  }
  return left;
});
//右侧年列表
const rightYears = computed(() => {
  let right = Object.assign([], years.value);
  if (years.value.length > 1) {
    right.shift();
  }
  return right;
});
//开始年
const startYear = ref(moment(value.value[0], 'YYYYMMDD').get('year') ?? years.value[0]);
const startYearValue = computed({
  get() {
    return startYear.value;
  },
  set(value) {
    startYear.value = value;
  }
});
//结束年
const endYearValue = computed({
  get() {
    let endValue = startYear.value + 1;
    return endValue;
  },
  set(value) {
    startYear.value = +value - 1;
  }
});
//左侧月份式样计算
const calcLeftClass = month => {
  let classes = ['item'];
  let yearMonth = +`${startYear.value}${month.toString().padStart(2, 0)}`;
  if (+tmpValue.value[0] === yearMonth || +tmpValue.value[1] === yearMonth) {
    classes.push('item-active');
  } else if (yearMonth >= +tmpValue.value[0] && yearMonth <= +tmpValue.value[1]) {
    classes.push('item-range');
  } else {
    //no things
  }
  return classes;
};
//右侧月份式样计算
const calcRightClass = month => {
  let classes = ['item'];
  let yearMonth = +`${endYearValue.value}${month.toString().padStart(2, 0)}`;
  if (+tmpValue.value[0] === yearMonth || +tmpValue.value[1] === yearMonth) {
    classes.push('item-active');
  } else if (yearMonth >= +tmpValue.value[0] && yearMonth <= +tmpValue.value[1]) {
    classes.push('item-range');
  } else {
    //no things
  }
  return classes;
};
//左侧值
// const leftValue = tmpValue.value[0];
//左右点击事件
const leftClick = () => {
  if (+startYear.value > years.value[0]) {
    startYear.value = startYear.value - 1;
  }
};
const nextClick = () => {
  if (+startYear.value < years.value[years.value.length - 2]) {
    startYear.value = startYear.value + 1;
  }
};

/**
 * 显示悬浮窗
 */
const dateBoxStyle = computed(() => {
  if (visible.value) {
    return 'block';
  } else {
    return 'none';
  }
});

const itemLeftClick = event => {
  if(event.target.className.includes('not-item') || !event.target.className.includes('item')){
    return;
  }
  let value = event.target.getAttribute('data-value') ?? '';
  value = value.padStart(2, '0');
  if (tmpValue.value.length === 2) {
    tmpValue.value = [];
  }
  tmpValue.value.push(`${startYear.value}${value}`);
  tmpValue.value.sort((item1, item2) => {
    return +item1 - +item2;
  });
  if (tmpValue.value.length === 2) {
    emits('update:value', tmpValue.value);
    emits('update:visible', false);
  }
};
const itemRightClick = event => {
  if(event.target.className.includes('not-item') || !event.target.className.includes('item')){
    return;
  }
  let value = event.target.getAttribute('data-value') ?? '';
  value = value.padStart(2, '0');
  if (tmpValue.value.length === 2) {
    tmpValue.value = [];
  }
  tmpValue.value.push(`${startYear.value + 1}${value}`);
  tmpValue.value.sort((item1, item2) => {
    return +item1 - +item2;
  });
  if (tmpValue.value.length === 2) {
    emits('update:value', tmpValue.value);
    emits('update:visible', false);
  }
};
</script>
<style lang="scss" scoped>
.daterang-box {
  padding: 12px;
  position: absolute;
  margin-top: 4px;
  display: none;
  box-shadow: 0px 0px 5px 5px #eeeeee;
  width: 490px;
  background: #ffffff;
  border-radius: 8px;
}
.input-box {
  height: 30px;
  width: 100%;
  background: url(../assets/calendar.png) no-repeat;
  background-size: 20px 20px;
  background-position-y: 3px;
  padding-left: 25px;
  padding-right: 25px;
  border-radius: 4px;
}
.select-box {
  padding: 6px 0px;
}
.next-btn {
  height: 20px;
  width: 20px;
  cursor: pointer;
}
.next-btn:hover {
  background: #eeeeee;
}
.item-box {
  list-style: none;
  padding: 0px;
  margin: 0px;
}
.item {
  display: inline-block;
  width: 56px;
  height: 32px;
  line-height: 32px;
}
.item {
  display: inline-block;
  width: 56px;
  height: 32px;
  line-height: 32px;
  cursor: pointer;
  border-radius: 4px;
}
.item:hover {
  background: #eeeeee;
}
.item-active {
  background: #357ebd !important;
}
.item-range {
  background: #dbdbdb;
}
</style>